<?php
$title = $_GET['title'] ?? '多幸运';
$content = $_GET['content'] ?? '韩安旭';
$url = $_GET['url']??'https://txmov2.a.kwimgs.com/upic/2025/06/15/22/BMjAyNTA2MTUyMjUyNTlfNjE1MjMzNDQ5XzE2NjkzNjk0MTc5MF8xXzM=_b_B32fdd949ac72135fe6cc8df0eb53679e.mp4?tag=1-1752321982-std-1-zmq267ev5q-3b4a76f5b8f283bb&clientCacheKey=3x8qenvudxyw6ic_b.mp4&tt=b&di=7cdc6692&bp=12681&ali_redirect_ex_hot=66666800&ali_redirect_ex_beacon=1';
$image = $_GET['image'] ?? 'http://q1.qlogo.cn/g?b=qq&nk=1661993235&s=640';

// 检测URL是否为视频格式
function isVideoUrl($url) {
    $videoExtensions = ['mp4', 'webm', 'ogg', 'mov', 'avi', 'mkv'];
    $path = parse_url($url, PHP_URL_PATH);
    $extension = pathinfo($path, PATHINFO_EXTENSION);
    return in_array(strtolower($extension), $videoExtensions);
}

$isVideo = isVideoUrl($url);
?>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo $title; ?></title>
    <link rel="icon" type="image/png" href="<? echo $image; ?>">
    <!-- 导入字体 -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <style>
        * {
            padding: 0;
            margin: 0;
            font-family: "优设标题黑";
            -webkit-user-select:none;
        }

        body {
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            overflow: hidden;
            background-color: #6e7cf5;
        }

        .shell {
            z-index: 99;
            width: 330px;
            height: 580px;
            border-radius: 15px;
            /* background-color: #fff6e7; */
            box-shadow: 0 10px 30px #00000085;
            /* 设置上高光和左高光，使其看起来更加逼真 */
            border-top: 1px solid rgba(255, 255, 255, .9);
            border-left: 1px solid rgba(255, 255, 255, .9);
            background: linear-gradient(to right bottom,
                    rgba(255, 255, 255, .6),
                    rgba(255, 255, 255, .3),
                    rgba(255, 255, 255, .2));
            /* 重点：使元素背景模糊化 */
            backdrop-filter: blur(16px);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .cover {
            width: 280px;
            height: 270px;
            overflow: hidden;
            position: absolute;
            top: 20px;
            border-radius: 5px;
            box-shadow: 0 5px 30px #7d70ecb7;
        }

        .cover img, .cover video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .shell input[type=range] {
            -webkit-appearance: none !important;
            margin: 0px;
            padding: 0px;
            background: rgb(255, 255, 255);
            height: 5px;
            width: 150px;
            outline: none;
            cursor: pointer;
            overflow: hidden;
            border-radius: 5px;
        }

        .shell input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none !important;
            background: #ff3677;
            height: 5px;
            width: 5px;
            border-radius: 50%;
            box-shadow: -100vw 0 0 100vw rgb(160, 200, 250);
        }

        .shell input[type=range]::-moz-range-thumb {
            background: #ff3677;
            height: 8px;
            width: 8px;
            border-radius: 100%;
        }

        .shell input[type=range]::-ms-thumb {
            -webkit-appearance: none !important;
            background: #ff3677;
            height: 8px;
            width: 8px;
            border-radius: 100%;
        }

        .info {
            position: absolute;
            top: 305px;
            text-align: center;
        }

        .info .title {
            font-size: 35px;
            color: rgb(40, 45, 100);
        }

        .info .singer {
            font-size: 20px;
            color: #6e7cf5;
        }

        .btn-box {
            position: absolute;
            top: 400px;
            width: 100%;
            display: flex;
            justify-content: center;
        }

        .btn-box i {
            font-size: 24px;
            color: rgb(40, 45, 100);
            margin: 0 30px;
            cursor: pointer;
        }

        .btn-box i.active {
            color: #ff3677;
        }

        .volume-box {
            display: none;
            position: absolute;
            top: 370px;
            z-index: 1;
            padding: 0 20px;
        }

        .volume-box .volume-down {
            position: absolute;
            left: -15px;
            cursor: pointer;
            color: rgb(40, 45, 100);
        }

        .volume-box .volume-up {
            position: absolute;
            right: -15px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            color: rgb(40, 45, 100);
        }

        .volume-box .volume-up::selection {
            background-color: unset;
        }

        .volume-box input[type=range] {
            height: 5px;
            width: 150px;
            margin: 0 0 15px 0;
        }

        .volume-box.active {
            display: block;
        }

        .music-box {
            position: absolute;
            top: 445px;
        }

        .music-box input[type=range] {
            height: 5px;
            width: 230px;
            margin: 0 0 10px 0;
        }

        .music-box input[type=range]::-webkit-slider-thumb {
            height: 5px;
            width: 7px;
        }

        .music-box .current-time {
            position: absolute;
            left: -35px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 12px;
            color: #252525;
        }

        .music-box .duration {
            position: absolute;
            right: -35px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 12px;
            color: rgb(40, 45, 100);
        }

        .music-box .play,
        .music-box .pause {
            position: absolute;
            left: 50%;
            top: 55px;
            transform: translateX(-50%);
            width: 50px;
            height: 50px;
            border-radius: 50px;
            background-color: rgb(160, 200, 250);
            cursor: pointer;
            transition: all 0.4s;
        }

        .music-box .play i,
        .music-box .pause i {
            font-size: 36px;
            color: rgb(40, 45, 100);
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-48%, -50%);
        }

        .music-box .pause i {
            font-size: 32px;
            transform: translate(-50%, -50%);
        }
        video{
            position: absolute;
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="shell">
        <div class="cover">
            <?php if ($isVideo): ?>
                <video id="mediaVideo" poster='<?php echo $image; ?>' playsinline>
                    <source src="<?php echo $url; ?>" type="video/mp4">
                </video>
            <?php else: ?>
                <img src='<?php echo $image; ?>' alt="">
            <?php endif; ?>
        </div>
        <div class="info">
            <div class="title"><?php echo $title; ?></div>
            <div class="singer"><?php echo $content; ?></div>
        </div>
        <div class="volume-box">
            <span class="volume-down"><i class="material-icons">remove</i></span>
            <input type="range" class="volume-range" step="1" value="80" min="0" max="100"
                oninput="handleVolumeChange(this.value/100)">
            <span class="volume-up"><i class="material-icons">add</i></span>
        </div>
        <div class="btn-box">
            <i class="material-icons repeat" onclick="handleRepeat()">repeat</i>
            <i class="material-icons favorite active" onclick="handleFavorite()">favorite</i>
            <i class="material-icons volume" onclick="handleVolume()">volume_up</i>
        </div>
        <div class="music-box">
            <input type="range" class="seekbar" step="1" value="0" min="0" max="100" oninput="handleSeekBar()">
            <audio class="music-element">
                <source src="<?php echo $url; ?>">
            </audio>
            <span class="current-time">0:0</span><span class="duration">0:0</span>
            <span class="play" onclick="handlePlay()">
                <i class="material-icons">play_arrow</i>
            </span>
        </div>
    </div>
</body>

<script>
    var isVideo = <?php echo $isVideo ? 'true' : 'false'; ?>;
    var music = document.querySelector('.music-element');
    var video = document.getElementById('mediaVideo');
    var currentMedia = isVideo ? video : music;
    var playBtn = document.querySelector('.play');
    var seekbar = document.querySelector('.seekbar');
    var currentTime = document.querySelector('.current-time');
    var duration = document.querySelector('.duration');
    var hasUserInteracted = false;
    
    // 初始化视频封面
    if (isVideo) {
        video.addEventListener('loadedmetadata', function() {
            // 视频加载后暂停，等待用户交互
            video.pause();
        });
    }
    
    function handlePlay() {
        // 首次播放时标记用户已交互
        if (!hasUserInteracted) {
            hasUserInteracted = true;
            // 如果是视频，设置音量（首次交互后才能播放有声视频）
            if (isVideo) {
                video.volume = document.querySelector('.volume-range').value / 100;
            }
        }
        
        // 如果媒体处于暂停状态
        if (currentMedia.paused) {
            // 播放媒体，更改按钮样式为暂停图标
            currentMedia.play()
                .then(() => {
                    playBtn.className = 'pause';
                    playBtn.innerHTML = '<i class="material-icons">pause</i>';
                })
                .catch(error => {
                    console.error("播放失败:", error);
                    alert("播放失败，请检查媒体链接或浏览器设置");
                });
        } else {
            // 暂停媒体，更改按钮样式为播放图标
            currentMedia.pause();
            playBtn.className = 'play';
            playBtn.innerHTML = '<i class="material-icons">play_arrow</i>';
        }
        
        // 当媒体播放完毕时
        currentMedia.addEventListener('ended', function () {
            // 更改按钮样式为播放图标，并将媒体当前时间重置为0
            playBtn.className = 'play';
            playBtn.innerHTML = '<i class="material-icons">play_arrow</i>';
            currentMedia.currentTime = 0;
        });
    }
    
    // 当媒体元素的元数据加载完毕时
    function initMediaMetadata() {
        // 设置进度条最大值为媒体总时长
        seekbar.max = currentMedia.duration;
        // 将媒体总时长格式化为分钟和秒，并在HTML中显示出来
        var ds = parseInt(currentMedia.duration % 60);
        var dm = parseInt((currentMedia.duration / 60) % 60);
        duration.innerHTML = dm + ':' + ds;
    }
    
    // 当媒体当前播放时间更新时
    function updateSeekbar() {
        // 将进度条的值设为当前播放时间，以实现进度条随着媒体播放而动态更新
        seekbar.value = currentMedia.currentTime;
    }
    
    // 定义处理进度条拖动的函数
    function handleSeekBar() {
        // 将媒体当前播放时间设为进度条的值，以实现通过拖动进度条控制媒体播放进度
        currentMedia.currentTime = seekbar.value;
    }
    
    // 每当媒体的播放时间更新时
    function updateTimeDisplay() {
        // 将媒体当前播放时间格式化为分钟和秒，并在HTML中显示出来
        var cs = parseInt(currentMedia.currentTime % 60);
        var cm = parseInt((currentMedia.currentTime / 60) % 60);
        currentTime.innerHTML = cm + ':' + cs;
    }
    
    // 处理音量变化
    function handleVolumeChange(volume) {
        music.volume = volume;
        if (video) video.volume = volume;
    }
    
    // 初始化媒体事件监听
    function initMediaEvents() {
        // 元数据加载完成事件
        currentMedia.onloadeddata = initMediaMetadata;
        
        // 时间更新事件
        currentMedia.ontimeupdate = updateSeekbar;
        
        // 进度条拖动事件
        seekbar.oninput = handleSeekBar;
        
        // 时间显示更新事件
        currentMedia.addEventListener('timeupdate', updateTimeDisplay, false);
    }
    
    // 初始化
    initMediaEvents();
    
    // 爱心点击变色
    var favIcon = document.querySelector('.favorite');
    function handleFavorite() {
        favIcon.classList.toggle('active');
    }
    
    // 循环播放
    var repIcon = document.querySelector('.repeat');
    function handleRepeat() {
        if (currentMedia.loop == true) {
            currentMedia.loop = false;
            repIcon.classList.toggle('active');
        }
        else {
            currentMedia.loop = true;
            repIcon.classList.toggle('active');
        }
    }
    
    // 获取 HTML 中的音量图标、音量控制器、音量滑动条、音量减小按钮和音量增加按钮
    var volIcon = document.querySelector('.volume');
    var volBox = document.querySelector('.volume-box');
    var volumeRange = document.querySelector('.volume-range');
    var volumeDown = document.querySelector('.volume-down');
    var volumeUp = document.querySelector('.volume-up');
    
    // 处理音量控制器的函数
    function handleVolume() {
        // 切换音量图标和音量控制器的 class 属性
        volIcon.classList.toggle('active');
        volBox.classList.toggle('active');
    }
    
    // 为音量减小按钮和音量增加按钮分别添加 click 事件监听器
    volumeDown.addEventListener('click', function() {
        // 将音量滑动条的值减少 20
        volumeRange.value = Math.max(0, Number(volumeRange.value) - 20);
        // 更新音量
        handleVolumeChange(volumeRange.value / 100);
    });
    
    volumeUp.addEventListener('click', function() {
        // 将音量滑动条的值增加 20
        volumeRange.value = Math.min(100, Number(volumeRange.value) + 20);
        // 更新音量
        handleVolumeChange(volumeRange.value / 100);
    });
    
    // 初始化音量
    handleVolumeChange(volumeRange.value / 100);
</script>

</html>